
import 'package:flutter/material.dart';

///
/// list_view_demo3.dart
///

// ListViewDemoWidget3
// ListViewDemoWidget3dot2
// ListViewDemoWidget3x3
void main() => runApp(const MaterialApp(home: ListViewDemoWidget3x3(),));


///
/// ListView.builder
/// 没有分隔线
///
class ListViewDemoWidget3 extends StatelessWidget {
  const ListViewDemoWidget3({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ListView 示例3')),
      body: ListView.builder(
        itemCount: 100,
        itemExtent: 50.0, // 列表项高度

        itemBuilder: (BuildContext context, int index){
          // Iterable.generate(100, (index){});
          // ListTile.divideTiles(tiles: tiles)
          return ListTile(title: Text('title $index'), subtitle: Text('body $index'),);
        }
      ),
    );
  }
}


///
/// ListView.separated
/// 带有分隔线
///
class ListViewDemoWidget3dot2 extends StatelessWidget {
  const ListViewDemoWidget3dot2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('ListView 示例3.2')),
      body: ListView.separated(
        itemCount: 100,
        separatorBuilder: (BuildContext context, int index) {
          return index % 2 == 0 ? const Divider(color: Colors.green,) : const Divider(color: Colors.red,);
        },
        itemBuilder: (BuildContext context, int index){
          return ListTile(title: Text('title $index'), subtitle: Text('body $index'),);
        },
      ),
    );
  }
}

///
/// ListTile.divideTiles
/// 这样做也是可以的，但是花费了一番功夫，在成功！
///
class ListViewDemoWidget3x3 extends StatelessWidget {
  const ListViewDemoWidget3x3({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // Iterable<int> it1 = [1, 2, 3, 4].map((x)=>x);
    Iterable<ListTile> iterable0 = Iterable.generate(100, (index){
      return ListTile(title: Text('title $index'), subtitle: Text('body $index'),);
    });
    // ListTile.divideTiles(tiles: iterable0)
    return Scaffold(
      appBar: AppBar(title: const Text('ListView 示例3.3')),
      body: ListView.builder(
        itemCount: 100,
        // itemExtent: 50,
        itemBuilder: (BuildContext context, int index){
          return ListTile.divideTiles(tiles: iterable0, context: context).elementAt(index);
        }
      ),
    );
  }
}


